
<script setup >
import { onMounted, watch } from "vue";
import { serviceHooks } from "./serviceHooks.js";

const { btnControlclick, statusTextComputed, resultComputed ,isStopComputed} = serviceHooks();

const emit = defineEmits(["statusTextComputed", 'reset', "resultComputed", 'btnControlclick']);
const btnControlclickEmit = () => {
  btnControlclick();

  emit('statusTextComputed', statusTextComputed )
  emit('resultComputed', resultComputed.value )
};

onMounted(()=>{
  btnControlclickEmit()
  console.log(`组件重新加载了`)
  
  watch(isStopComputed,()=>{
    emit('reset')
    emit('statusTextComputed', statusTextComputed.value )
    emit('resultComputed', resultComputed.value )
  })
  watch(statusTextComputed,()=>{
    emit('statusTextComputed', statusTextComputed.value )
    emit('resultComputed', resultComputed.value )
  })
  watch(resultComputed,()=>{
    console.log(`内容发生改变resultComputed`,resultComputed.value)
    emit('statusTextComputed', statusTextComputed.value )
    emit('resultComputed', resultComputed.value )
  })
})




</script>


<template>
  <div >
    <!-- <span
      @click="btnControlclickEmit"
      class="iconfont iconfont_speak icon-zhinengkouyu"
    ></span>

    <h3>
      -statusTextComputed:{{ statusTextComputed }}--resultComputed:
      {{ resultComputed }}
    </h3> -->

  
  </div>
  <!-- <div class="box12" style="background: red;">123</div> -->
</template>
        

    

    
<style  scoped>

.isrecording {
  text-align: center;
  position: fixed;
  height: 150px;
  width: 300px;
  bottom: 280px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>